<template>
    <div class="block_next">
        <div class="block_title" :class="{stick_out:stickOut}">
            <slot name="title"></slot>
        </div>
        <div class="block_des">
            <slot name="des"></slot>
        </div>
        <i class="bi bi-chevron-right icon"></i>
    </div>
</template>
<script>
export default {
    name:'g-block-next',
    props:{
        stickOut:{
            type:Boolean,
            default:false
        }
    }
}
</script>
<style scoped>
    .block_next{
        border: 1px solid #ACDBFF;
        background-color: #f7fbff;
        padding: 10px;
        display: grid;
        grid-template-rows: repeat(2,auto);
        grid-template-columns: repeat(1,1fr);
        row-gap: 8px;
        border-radius: 5px;
        margin: 0 0 10px 0;
        cursor: pointer;
        position: relative;
    }
    .icon{
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
    }
    .block_title{
        grid-area: 1/1/span 1/span 1;
        font-size: 16px;
        font-weight: 600;
        color: #3784d68f;
        transition: all .3s;
        padding-right: 20px;
    }
    .stick_out{
        color: #155fad;
        font-size: 17px;
        transition: all .3s;
    }
    .block_des{
        grid-area: 2/1/span 1/span 1;
        padding-right: 20px;
        font-size: 13px;
        color: rgba(0, 0, 0, 0.5);
        transition: all .3s;
    }

    @media screen and (max-width: 500px) {
        .block_title{
            font-size: 14px;
        }
        .stick_out{
            font-size: 15px;
        }
        .block_des{
            grid-area: 2/1/span 1/span 1;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.5);
        }
    }
    
</style>